<template>
  <div>
    <div v-if="userInfo.user_id === null" class="NoUserContainer">
      <el-result icon="info" title="尚未选择用户">
        <template #sub-title>
          <p>请选择用户后访问此页面</p>
        </template>
        <template #extra>
          <el-button type="primary" :icon="Pointer" size="large" @click="chooseUser">选择用户</el-button>
        </template>
      </el-result>
    </div>
    <div v-else class="MainContainer">
      <el-tag size="large" effect="light" >当前用户: {{userInfo.username}}</el-tag>
      <el-table
          :data="LendList"
          height="550"
          border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column label="序号" align="center">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="item_id" label="物品ID" align="center"></el-table-column>
        <el-table-column prop="name" label="物品名称" align="center"></el-table-column>
        <el-table-column prop="borrow_time" label="借出时间" align="center"></el-table-column>
        <el-table-column label="操作" width="220" align="center">
          <template #default="scope">
            <el-button text :icon="Sell" @click="handleReturn(scope.row, scope.$index)">
              申请归还
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive, watch} from "vue";
import {useUserStore} from "../../store/user";
import { useRouter } from "vue-router";
import { Pointer,Sell } from '@element-plus/icons-vue';
import { ref } from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import axios from "axios";

interface LendInfo {
  item_id: string | number;
  name: string;
  borrow_time: string;
  info_id: string
}
const LendList = ref<LendInfo[]>([])

const router = useRouter()

const userInfo = reactive({
  user_id: useUserStore().user_id_return,
  username: useUserStore().username_return
})

const getUserData = () => {
  userInfo.user_id = useUserStore().user_id_return;
  userInfo.username = useUserStore().username_return
}

const getData = () => {
  axios.get(`http://localhost:8080/borrowInfo/${userInfo.user_id}`)
      .then(res=>{
        LendList.value=res.data.data
      })
}

const chooseUser= () => {
  router.push({ name: 'userManage' });
}

const handleReturn = (row: any, index: any) => {
  ElMessageBox.confirm('确定批准归还吗?', '提示', {
    type: 'warning'
  })
      .then(() => {
        axios.post(`http://localhost:8080/returninfos`,
            JSON.stringify({user_id: userInfo.user_id, item_id: row.item_id, info_id: row.info_id}),
            {headers:{"Content-Type": 'application/json'}})
            .then(res=>{
              if(res.data.data){
                LendList.value.splice(index,1)
                ElMessage.success("用户归还成功!")
              }else{
                ElMessage.error("注销用户失败!")
              }
            })
      })
      .catch(() => {});
}

watch(
    () => router.currentRoute.value,
    (newRoute) => {
      if(newRoute.name=="returnHandle"){
        getUserData()
      }
    },
    { immediate: true }
);

getData()
</script>

<style scoped>
.NoUserContainer {
  margin-top: 12%;
}
</style>